<template>
	<view class="chapter">
		<svg xmlns="http://www.w3.org/2000/svg" width="263" height="401" viewBox="0 0 263 401" fill="none">
		  <path d="M10.6478 0L0 9.85258V391.147L10.6478 401H252.352L263 391.147V9.85258L252.352 0H10.6478Z" fill="#494953"/>
		</svg>
		<view class="nav">
			<navigator url="/pages/report/report">成绩报告</navigator>
			<navigator url="/pages/character/character">切换角色</navigator>
		</view>
		<view class="list uv-flex-row">
			<navigator :url="`/pages/map/map?chapter=${item.chapter}`" class="item uv-flex-column" v-for="(item,index) in list" :key="index">
				<view class="bg" :style="`background: url(${item.logo.url || item.logo })`"></view>
				<view class="progress">已探索{{completeProgress(item)}}</view>
				<view class="name">{{item.name}}</view>
				<view class="active" style="background: #fff;" v-if="isActiveAddress(item)">
					<uv-icon name="empty-address" label="当前位置"></uv-icon>
				</view>
			</navigator>
		</view>
		<view @click="addChapter.open()" style="position: fixed;right: 20px;bottom: 20px;width: 60px;height: 60px;background: pink;cursor: pointer;">添加课程包</view>
		<add-chapter-popup :selectChapterList="list" :chapterList="chapterListRes" ref="addChapter" @reloadData="getComplete" />
	</view>
</template>
<script setup>
	import { computed, reactive, ref, watch, onBeforeMount, defineComponent } from 'vue';
	import { checkLocalCharacter } from '@/common/js/character.js';
	import { userChapterComplateList, chapterList } from '@/common/api/list.js';
	import { getCourseLastActive } from '@/common/js/getData.js';
	import useInit from '@/common/hooks/useInit.js';
	import addChapterPopup from '@/pages/chapter/components/add-chapter-popup.vue'
	useInit('reloadChapterData', getComplete);
	defineComponent({ addChapterPopup });
	const addChapter = ref(null);
	const chapterListRes = ref([]);
	try {
		checkLocalCharacter();
		uni.$emit('initData');
		// 获取最后选中课程
		getCourseLastActive();
		getComplete();
		// 获取全部章节数据，添加课程等地方使用
		getAllChapterList();
	} catch (e) {}
	const list = computed(() => {
		return getApp().globalData.dzdata?.userChapterList;
	})
	const completeResult = ref([]);
	// 是否显示错误类名
	const completeProgress = computed((item) => {
		return (item) => {
			const findItem = completeResult.value.find(item2 => item2.chapter == item.chapter);
			if (findItem) {
				const { completeCourseCount, courseCount } = findItem;
				return `${completeCourseCount}/${courseCount}`;
			} else {
				return '';
			}
		}
	})
	// 当前位置
	const isActiveAddress = computed((item) => {
		return item => {
			return getApp().globalData.dzdata?.lastActive?.chapter == item.chapter;
		}
	})
	// 获取完成度相关数据
	async function getComplete() {
		const { data } = await userChapterComplateList({
			characterId: getApp().globalData.dzcharacter?.character?.characterId,
			uid: uniCloud.getCurrentUserInfo().uid
		});
		completeResult.value = data;
	}
	// 获取完整数据
	async function getAllChapterList() {
		const { data } = await chapterList({ uid: uniCloud.getCurrentUserInfo().uid });
		chapterListRes.value = data;
		getApp().globalData.setdzdata('chapterList', data);
	}
</script>
<style scoped lang="scss">
	.list {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		.item {
			width: 220px;
			height: 250px;
			border-radius: 5px;
			border: 1px solid #ccc;
			cursor: pointer;
			padding: 10px;
			margin: 10px;
			.bg {
				width: 200px;
				height: 200px;
				background-size: cover !important;
			}
		}
	}
</style>